<template>
  <div>
    <header>
      <span>时间筛选：</span>
      <DatePicker v-model="queryData.start" type="date" placeholder="开始时间" style="width: 200px"></DatePicker>
      ——
      <DatePicker v-model="queryData.end" type="date" placeholder="结束时间" style="width: 200px"></DatePicker>
      <br>
      <div style="margin-top:10px">
      <span>违规类型：</span>
      <Select v-model="queryData.type" style="width:200px">
        <Option v-for="item in violateType" :value="item.udvtypeId" :key="item.udvtypeId">{{ item.udvtypeName }}</Option>
      </Select>
      <span style="margin-left:10px">工号查询：</span>
      <Input v-model="queryData.account" placeholder="请输入工号名称" style="width: 200px"/>
      <span style="margin-left:10px">姓名查询：</span>
      <Input v-model="queryData.name" placeholder="请输入工号名称" style="width: 200px"/>
      <Button type="primary" @click="queryList" class="query">查询</Button>
      <Button @click="reset" class="reset">重置</Button>
      </div>
    </header>
    <div>
      <Table stripe :columns="columns1" :data="data1" style="margin-top:15px">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot="action" slot-scope="{ row, index }">
          <Button type="primary" @click="detail(index)" size="small">查看详情</Button>
          <Button type="success" @click="download(index)" size="small">下载</Button>
        </template>
      </Table>
    </div>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="100" :current="queryData.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
      </div>
    </div>
    <Modal
      v-model="modal1"
      title="违规图片"
      @on-ok="ok"
      @cancel="false"
      width="650"
    >
      <img :src="imgSrc" width="600px">
    </Modal>
  </div>
</template>

<script src="./violate-component.js">
</script>

<style scoped>

</style>
